<template>
  <div class="p-2">
    <!--自定义查询区域-->
    <div class="jeecg-basic-table-form-container" @keyup.enter="searchQuery">
      <a-form ref="formRef" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :lg="6">
            <a-form-item label="用户名">
              <a-input placeholder="请输入名称模糊查询" v-model:value="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item label="年龄">
              <a-input placeholder="最小年龄" type="ge" v-model:value="queryParam.ageBegin" style="width: calc(50% - 15px)"></a-input>
              <span>~</span>
              <a-input placeholder="最大年龄" type="le" v-model:value="queryParam.ageEnd" style="width: calc(50% - 15px)"></a-input>
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item label="性别">
              <a-input placeholder="请选择性别" v-model:value="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :lg="6">
              <a-form-item label="选择用户">
                <a-input placeholder="请选择用户" v-model:value="queryParam.name"></a-input>
              </a-form-item>
            </a-col>
          </template>
          <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
            <a-col :lg="6">
              <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
              <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
              <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
              </a>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>
    <div style="background-color: #ffffff; padding : 10px;margin-top: 10px;">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button @click="handleAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
        <!-- <a-button type="primary" preIcon="ant-design:download" @click="handleExportExcel('单表原生列表')">导出</a-button>-->
        <!-- <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="handleImportExcel">导入</j-upload-button>-->
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="batchDel">
                <Icon icon="ant-design:delete-outlined"></Icon>
                删除
              </a-menu-item>
            </a-menu>
          </template>
          <a-button>批量操作
            <Icon icon="mdi:chevron-down" />
          </a-button>
        </a-dropdown>
      </div>

      <!-- table区域-begin -->
      <div>
        <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
          <a-alert type="info" show-icon class="alert">
            <template #message>
              <template v-if="selectedRowKeys.length > 0">
                <span>
                  <span>已选中 {{ selectedRowKeys.length }} 条记录</span>
                  <span>(可跨页)</span>
                </span>
                <a-divider type="vertical" />
                <a @click="onClearSelected">清空</a>
                <slot name="alertAfter" />
              </template>
              <template v-else>
                <span>未选中任何数据</span>
              </template>
            </template>
          </a-alert>
        </div>

        <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" @change="handleTableChange">
          <template #bodyCell="{ column, text, record }">
            <template v-if="column.dataIndex === 'tupian'">
              <span v-if="!text" style="font-size: 12px; font-style: italic">无图片</span>
              <img v-else :src="getImgView(text)" :preview="record.id" alt="" class="anty-img-wrap" />
            </template>
            <template v-else-if="column.dataIndex === 'wenjian'">
              <span v-if="!text" style="font-size: 12px; font-style: italic">无文件</span>
              <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download" size="small" @click="downloadFile(text)"> 下载 </a-button>
            </template>
            <template v-else-if="column.dataIndex === 'action'">
              <a @click="handleEdit(record)">编辑</a>
              <a-divider type="vertical" />
              <a-dropdown>
                <!-- update-begin--author:liaozhiyang---date:20230803---for：【QQYUN-5838】图标改小保持一致 -->
                <a class="ant-dropdown-link">更多 <Icon icon="mdi-light:chevron-down"></Icon></a>
                <!-- update-end--author:liaozhiyang---date:20230803---for：【QQYUN-5838】图标改小保持一致 -->
                <template #overlay>
                  <a-menu class="antd-more">
                    <a-menu-item>
                      <a @click="handleDetail(record)">详情</a>
                    </a-menu-item>
                    <a-menu-item>
                      <Popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                      </Popconfirm>
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
            <!-- <template v-else-if="column.dataIndex==='htmlSlot'">
            <div v-html="text"></div>
          </template>
          <template v-else-if="column.dataIndex==='pcaSlot'">
            <div>{{ getAreaTextByCode(text) }}</div>
          </template> -->
          </template>
        </a-table>
      </div>
    </div>
    <OneNativeModal ref="oneProtogenesisModal" @ok="handleSuccess"></OneNativeModal>
  </div>
</template>

<script lang="ts" setup>
import './TableExpand.less';
import { onMounted, ref, reactive } from 'vue';
import { defHttp } from '/@/common/util/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import { filterMultiDictText } from '/@/utils/dict/JDictSelectUtil.js';
import { getAreaTextByCode } from '/@/components/Form/src/utils/Area';
import OneNativeModal from './components/OneNativeModal.vue';
import { Modal, Popconfirm } from 'ant-design-vue';
import Icon from '/@/components/Icon/index';
import { filterObj, getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { getToken } from '/@/common/util/auth';
import { useMethods } from '/@/hooks/system/useMethods';
import { downloadFile } from '/@/utils/common/renderUtils';
import { initDictOptions } from '/@/utils/dict';

const { handleExportXls, handleImportXls } = useMethods();
const modalVisible = ref<boolean>(false);
const queryParam = ref<any>({});
const loading = ref<boolean>(false);
const dictOptions = ref<any>([]);
const oneProtogenesisModal = ref();
const tokenHeader = { 'X-Access-Token': getToken() };
//表头
const columns = ref<any>([
  {
    title: '文本',
    align: 'center',
    dataIndex: 'name',
  },
  {
    title: '字典下拉',
    align: 'center',
    dataIndex: 'xiala',
    customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value['xiala'], text) : ''),
  },
  {
    title: '字典单选',
    align: 'center',
    dataIndex: 'danxuan',
    customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value['danxuan'], text) : ''),
  },
  {
    title: '字典多选',
    align: 'center',
    dataIndex: 'duoxuan',
    customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value['duoxuan'], text) : ''),
  },
  {
    title: '开关',
    align: 'center',
    dataIndex: 'kaiguan',
    customRender: ({ text }) => (text ? filterMultiDictText(dictOptions.value['kaiguan'], text) : ''),
  },
  {
    title: '日期',
    align: 'center',
    dataIndex: 'riqi',
    customRender: function ({ text }) {
      return !text ? '' : text.length > 10 ? text.substr(0, 10) : text;
    },
  },
  {
    title: '年月日时分秒',
    align: 'center',
    dataIndex: 'nyrsfm',
  },
  {
    title: '时间',
    align: 'center',
    dataIndex: 'shijian',
  },
  {
    title: '文件',
    align: 'center',
    dataIndex: 'wenjian',
  },
  {
    title: '图片',
    align: 'center',
    dataIndex: 'tupian',
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    fixed: 'right',
    width: 147,
  },
]);

const Api = reactive<any>({
  list: '/test/oneNative/list',
  delete: '/test/oneNative/delete',
  exportXls: '/test/oneNative/exportXls',
  importExcel: 'test/oneNative/importExcel',
});

const dataSource = ref<any>([]);
const toggleSearchStatus = ref<boolean>(false);
const ipagination = ref<any>({
  current: 1,
  pageSize: 10,
  pageSizeOptions: ['10', '20', '30'],
  showTotal: (total, range) => {
    return range[0] + '-' + range[1] + ' 共' + total + '条';
  },
  showQuickJumper: true,
  showSizeChanger: true,
  total: 0,
});

const selectedRowKeys = ref<any>([]);
const selectionRows = ref<any>([]);
const iSorter = ref<any>({ column: 'createTime', order: 'desc' });
const iFilters = ref<any>({});
const { createMessage } = useMessage();

//查询条件
const labelCol = reactive({
  xs: { span: 24 },
  sm: { span: 7 },
});
const wrapperCol = reactive({
  xs: { span: 24 },
  sm: { span: 16 },
});

onMounted(() => {
  dictOptions.value['kaiguan'] = [
    { text: '是', value: '1' },
    { text: '否', value: '2' },
  ];
  //初始加载页面
  loadData();
  //初始化字典选项
  initDictConfig();
});

/**
 * 复选框选中事件
 * @param rowKeys
 * @param rows
 */
function onSelectChange(rowKeys, rows) {
  selectedRowKeys.value = rowKeys;
  selectionRows.value = rows;
}

/**
 * 表格改变事件
 */
function handleTableChange({ pagination, filters, sorter }) {
  ipagination.value = pagination;
  iSorter.value = sorter;
  iFilters.value = { ...filters };
}

/**
 * 新增
 */
function handleAdd() {
  oneProtogenesisModal.value.disableSubmit = false;
  oneProtogenesisModal.value.add();
}

/**
 * 清除选中行
 */
function onClearSelected() {
  selectedRowKeys.value = [];
  selectionRows.value = [];
}

/**
 * 批量删除
 */
function batchDel() {
  Modal.confirm({
    title: '确认删除',
    content: '是否删除选中数据',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      defHttp.delete({ url: Api.delete, data: { ids: selectedRowKeys.value } }, { joinParamsToUrl: true }).then(() => {
        handleSuccess();
      });
    },
  });
}

/**
 * 导出excel
 */
function handleExportExcel(title) {
  let paramsForm = getQueryParams();
  if (selectedRowKeys.value && selectedRowKeys.value.length > 0) {
    paramsForm['selections'] = selectedRowKeys.join(',');
  }
  handleExportXls(title, Api.exportXls, filterObj(paramsForm));
}

/**
 * 导入excel
 */
function handleImportExcel(file) {
  handleImportXls(file, Api.importExcel, '').then(() => {
    handleSuccess();
  });
}

/**
 * 获取查询参数
 */
function getQueryParams() {
  let params = Object.assign(queryParam.value, iSorter.value, iFilters.value);
  params.field = getQueryField();
  params.pageNo = ipagination.value.current;
  params.pageSize = ipagination.value.pageSize;
  return filterObj(params);
}

/**
 * 字段权限控制
 */
function getQueryField() {
  let str = 'id,';
  columns.value.forEach(function (value) {
    str += ',' + value.dataIndex;
  });
  return str;
}

/**
 * 初始化数据
 */
function loadData(arg?) {
  if (arg === 1) {
    ipagination.value.current = 1;
  }
  loading.value = true;
  let params = getQueryParams();
  defHttp
    .get({ url: Api.list, params }, { isTransformResponse: false })
    .then((res) => {
      if (res.success) {
        dataSource.value = res.result.records;
        if (res.result && res.result.total) {
          ipagination.value.total = res.result.total;
        } else {
          ipagination.value.total = 0;
        }
      } else {
        createMessage.warning(res.message);
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

//查询
function searchQuery() {
  loadData(1);
  selectedRowKeys.value = [];
  selectionRows.value = [];
}

/**
 * 查询区域展开关闭
 */
function handleToggleSearch() {
  toggleSearchStatus.value = !toggleSearchStatus.value;
}

/**
 * 重置按钮
 */
function searchReset() {
  queryParam.value = {};
  loadData(1);
}

/**
 * 获取预览图片
 */
function getImgView(text) {
  if (text && text.indexOf(',') > 0) {
    text = text.substring(0, text.indexOf(','));
  }
  return getFileAccessHttpUrl(text);
}

/**
 * 编辑
 * @param record
 */
function handleEdit(record) {
  oneProtogenesisModal.value.disableSubmit = false;
  oneProtogenesisModal.value.edit(record);
}

/**
 * 详情
 * @param record
 */
function handleDetail(record) {
  oneProtogenesisModal.value.disableSubmit = true;
  oneProtogenesisModal.value.edit(record);
}

/**
 * 删除
 * @param id
 */
function handleDelete(id) {
  defHttp.delete({ url: Api.delete, data: { ids: id } }, { joinParamsToUrl: true }).then((res) => {
    handleSuccess();
  });
}

/**
 * 初始化字典选项
 */
async function initDictConfig() {
  dictOptions.value['xiala'] = await initDictOptions('sex');
  dictOptions.value['danxuan'] = await initDictOptions('sex');
  dictOptions.value['duoxuan'] = await initDictOptions('urgent_level');
}

/**
 * 保存表单后回调事件
 */
function handleSuccess() {
  selectedRowKeys.value = [];
  selectionRows.value = [];
  loadData(1);
}
</script>
<style lang="less" scoped>
.jeecg-basic-table-form-container {
  padding: 0px;
  background-color: @component-background;

  .ant-form {
    padding-top: 8px;
  }

  .table-page-search-submitButtons {
    display: block;
    // margin-bottom: 24px;
    white-space: nowrap;
  }
}
</style>